<template>
	<view class="content">
		<u-navbar
			title="掌迅达商城"
			:titleStyle="titleStyle"
		>
			<view slot="left"></view>
		</u-navbar>
	<!-- 	<view style="width: 100vw;height: 90rpx;text-align: center;line-height: 90rpx;position: fixed;top: 150rpx;font-size: 36rpx;color: #4d4d4d;font-weight: 550;z-index: 9999;">
			掌讯达商城
		</view> -->
		<view class="top">
			<image src="../../static/backgroundindex.png" mode="aspectFill"></image>
		</view>

		<view class="top-swiper">
			<u-swiper
				:list="list1"
				height="180"
				indicator
				
				indicatorMode="dot"
				@click="swiperclick"
			></u-swiper>
		</view>
		<!-- <view style="margin-top: 30rpx">
			<goods-list></goods-list>
		</view> -->
		<!-- 分类 -->
		<!-- 分类 -->
		<!-- <view class="cate-section">
			<view @click="linkToList" class="cate-item">
				<image src="/static/remen.png"></image>
				<text>热门推荐</text>
			</view>
			<view @click="linkToIntegral" class="cate-item">
				<image src="/static/jifen.png"></image>
				<text>积分商城</text>
			</view>
			<view @click="linkToSignin" class="cate-item">
				<image src="/static/qiandao.png"></image>
				<text>签到积分</text>
			</view> 
			<view @click="linkToCategory" class="cate-item">
				<image src="/static/fenlei.png"></image>
				<text>商品分类</text>
			</view>
		</view> -->
		<!-- 商品列表 -->
		<view class="goods_list">
			<view class="two_list">
				<view
					class="goods_item"
					v-for="(i,index) in productsList"
					:key="index"
					@click="goToInfo(i.id)"
				>
					<view class="goods_pic">
						<!-- <image :src="i.image[0]" mode="aspectFill"></image> -->
						<image :src="'https://images.weserv.nl/?url=' + i.image[0]"   mode="aspectFill"></image>
					</view>
					<view class="goods_info">
						<view class="goods_title"><u--text :lines="2" :text="i.title"></u--text></view>
						<view class="goods_price">
							<!-- <view class="line_price">￥{{ i.price }}</view> -->
							<view class="price">
								<view class="">￥{{ i.price }}</view>
								<!-- <view class="vip_tag">会员价</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100vw;text-align: center;margin: 30rpx auto;">
			<image src="@/static/logo.png" mode="" style="width: 185rpx;height: 75rpx;"></image>
		</view>
		
		
		

		<tabbar></tabbar>
	</view>
</template>

<script>
import { products } from '../../api/base';
import { banners } from '../../api/banner';

export default {
	data() {
		return {
			bgColor:'#82d8ff',  
			titleStyle:{
				color: '#2877d5',
				fontSize: '32rpx',
				fontWeight: '600'
			},
			title: '',
			list1: [],
			productsList:[],
			// allData: [
			// 	{
			// 		src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			// 		title: 'supersuper超级超级大大大大大容量锂电池1000000mha',
			// 		price: '120.00',
			// 		vipPrice: '100.00'
			// 	},
			// 	{
			// 		src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			// 		title: 'super1000mha',
			// 		price: '120.00',
			// 		vipPrice: '100.00'
			// 	}
			// ],
			params:{
				page:1,
				per_page:20,
				is_show_index:1
				
			}
			
		};
	},
	onShareAppMessage() {
	    return {
	      title: '掌讯达商城',
	      path: '/pages/index/index',  // 分享后跳转的路径
	      // imageUrl: '/static/share.png'  // 分享显示的图片
	    }
	  },
	  onShareTimeline() {
	    return {
	      title: '掌讯达商城',
	      // query: 'key=value' // 可选 参数
	    }
	  },
	onPageScroll(res) {
		//获取距离顶部距离
		const scrollTop = res.scrollTop;
		if (scrollTop >= 100) {
			this.bgColor = '#fff'
			this.titleStyle = {
				color: '#2877d5',
				fontSize: '32rpx',
				fontWeight: '600'
			}
		} else {
			this.bgColor = 'transparent'; 
			this.titleStyle = {
				color: '#2877d5',
				fontSize: '32rpx',
				fontWeight: '600'
			}
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.getBanner()
		this.getProducts();
	},
	methods: {
		// 获取轮播图
		getBanner(){  
			banners().then((res) => {
				const list = res.data
				this.list1 = list.map(item => {
					return {
						...item,
						url:item.image_path,
						image_path:null 
					}
				}) 
			})
		},
		// 点击轮播图
		swiperclick(e){
			if(this.list1[e].type == 1){
				uni.navigateTo({
					url:'/pages/webView/webView?url=' + this.list1[e].src
				})
			}else if(this.list1[e].type == 2){
				uni.navigateTo({
					url:'/pages/richTextPage/richTextPage?html=' + e
				})
			}
		},
		// 商品列表
		linkToList(){
			uni.navigateTo({
				url:'/pages/product/list'
			})
		}, 
		// 跳转商品分类
		linkToCategory(){
			uni.navigateTo({
				url:'/mallPage/index/index'
			})
		},
		// 跳转签到
		linkToSignin(){
			uni.navigateTo({
				url:'/pages/signin/signin'
			})
		},
		// 跳转积分商城
		linkToIntegral(){
			uni.navigateTo({
				url:'/pages/integral/integral'
			})
		},
		getProducts() {
			products(this.params).then((res) => {
				this.productsList=res.data.data
			});
		},
		goToInfo(i){
			uni.navigateTo({
				url:`/mallPage/goodsInfo/goodsInfo?id=${i}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.top {
		height: 500rpx;
		width: 100%;
		image{
			height: 500rpx;
			width: 100%;
		}
		// background-image: url('https://iot.wehcatapp.zhongtuodianshang.cn/uploads/images/202407/10/16_1720593297_e6N747fXwq.jpg');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}
	.top-swiper {
		padding: 0 42rpx; 
		margin-top: -260rpx;
	}
	// 分类
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30rpx 22rpx; 
		background: #f2f2f2 ;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #303133;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
		}
	}
	.goods_list {
		padding: 0 30rpx;
		margin-top: 30rpx;
		.two_list {
			display: flex;
			flex-wrap: wrap;
	
			.goods_item {
				border-radius: 10rpx;
				background-color: #fff;
				// height: 480rpx;
				width: 330rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				&:nth-child(2n-1) {
					margin-left: 0;
				}
				.goods_pic {
					position: relative;
					image {
						width: 330rpx;
						height: 330rpx;
						border-radius: 10rpx 10rpx 0 0;
					}
					.image_tag{
						position: absolute;
						top: 0;
						background-color: #1786f8;
						border-radius: 10rpx 0 10rpx 0;
						font-size: 20rpx;
						color: #fff;
						padding:  6rpx 14rpx;
					}
				}
				.goods_info {
					padding: 10rpx 20rpx 20rpx 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// height:150rpx ;
					height:120rpx ;
					.goods_price{
						.line_price {
							text-decoration: line-through;
							font-size: 20rpx;
							color: #aaa;
						}
						.price {
							font-weight: bold;
							font-size: 28rpx;
							color: #1786f8;
							display: flex;
							.vip_tag {
								background-color: #000000;
								border-radius: 6rpx;
								font-size: 15rpx;
								padding: 0 8rpx;
								height: 28rpx;
								font-weight: normal;
								line-height: 28rpx;
								margin-top: 6rpx;
								margin-left: 10rpx;
								color: #ddda80;
								position: relative;
								z-index: 1;
								&::before {
									content: '';
									display: block;
									position: absolute;
									left: -6rpx;
									z-index: 0;
									border-top: 8rpx solid #000000;
									border-bottom: 8rpx solid transparent;
									border-left: 8rpx solid transparent;
									border-right: 8rpx solid #000000;
								}
							}
						}
						
					}
	
					
				}
			}
		}
	}
}
</style>
